<template>
	<view>
		<u-swiper :list="lun" :height="250" :effect3d="true" :interval="3000"></u-swiper>
		<uni-group title="全部服务">
			<view class="item-container">
				<view class="thumb-box" v-for="(item1, index1) in list" :key="index1" @click="dianji(item1.link)">
					<image class="item-menu-image" :src="item1.image" mode=""></image>
					<view class="item-menu-name">{{item1.text}}</view>
				</view>
			</view>
		</uni-group>
		<uni-group title="党建动态">
			<uni-card title="文章展示" >
				<uni-card @click="xian" title="山东城市建设职业学院智慧党建应用案例">
					<image src="../../../static/zhihui/DangJian1.jpg.jpg" style="width: 100%;"></image>
					<view>随着移动互联网技术普及到生活、生产的方方面面，“移动党建”也成为各级党组织推进党建工作的</view>
				</uni-card>
			</uni-card>
			<uni-card title="文章分类:应用" @click="xian">
				<uni-card @click="xian" v-for="(item,index) in 2" title="山东城市建设职业学院智慧党建应用案例" thumbnail="../../../static/zhihui/DangJian1.jpg.jpg">
					<view>随着移动互联网技术普及到生活、生产的方方面面，“移动党建”也成为各级党组织推进党建工作的</view>
				</uni-card>
			</uni-card>
			<uni-card title="文章展分类:科技" @click="xian">
				<uni-card @click="xian" v-for="(item,index) in 5" title="山东城市建设职业学院智慧党建应用案例" thumbnail="../../../static/zhihui/DangJian1.jpg.jpg">
					<view>随着移动互联网技术普及到生活、生产的方方面面，“移动党建”也成为各级党组织推进党建工作的</view>
				</uni-card>
			</uni-card>
		</uni-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lun: [{
						image: '../../../static/zhihui/1.jpg'
					},
					{
						image: '../../../static/zhihui/2.jpg'
					},
					{
						image: '../../../static/zhihui/2.png'
					}
				],
				list: [{
						image: '../../../static/zhihui/icon/home_act.png',
						text: '党员学习',
						link: 'xuexi/xuexi'
					},
					{
						image: '../../../static/zhihui/icon/orderIcon_act.png',
						text: '组织活动',
						link: 'zuzhi'
					},
					{
						image: '../../../static/zhihui/icon/serve_act.png',
						text: '建言献策',
						link: 'jianyan'
					},
					{
						image: '../../../static/zhihui/icon/user_act.png',
						text: '随手拍',
						link: 'sui'
					}
				]
			}
		},
		methods: {
			dianji(url){
				uni.navigateTo({
					url:url
				})
			},
			xian(){
				uni.navigateTo({
					url:'xianq'
				})
			}
		}
	}
</script>

<style>
	.item-container {
		display: flex;
		flex-wrap: wrap;
	}

	.thumb-box {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}

	.item-menu-image {
		width: 120rpx;
		height: 120rpx;
	}
</style>
